<template>
    <div class="container">
        <div id="map"></div>
    </div>
</template>
  
<script>
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl"; // or "const mapboxgl = require('mapbox-gl');"
export default {
    name: "Vue2MapboxMapTemplate",
    data() {
        return {};
    },

    mounted() {
        this.initMap();
    },

    methods: {
        initMap() {
            mapboxgl.accessToken =
                "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
            const map = new mapboxgl.Map({
                container: "map", // container ID
                style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z", // style URL
                center: [-101.79013542048335, 32.05775855185749], // starting position [lng, lat]
                // center: mapboxgl.MercatorCoordinate.fromLngLat([118.79013542048335,32.05775855185749]), // starting position [lng, lat]
                zoom: 5, // starting zoom
                projection: "mercator",
            });

            //
            map.on("click", (evt) => {
                console.log(evt.lngLat);
                let features = map.queryRenderedFeatures(evt.point);
                console.log(features[0]);
            });

            map.on('load', (e) => {
                map.addSource('counties', {
                    'type': 'vector',
                    'url': 'mapbox://mapbox.82pkq93d'
                });

                map.addLayer(
                    {
                        'id': 'counties',
                        'type': 'fill',
                        'source': 'counties',
                        'source-layer': 'original',
                        'paint': {
                            'fill-outline-color': 'rgba(255,255,255,0.9)',
                            'fill-color': 'rgb(0,0,255)',
                            // "fill-color": [
                            //     "case",
                            //     ["boolean", ["feature-state", "hover"], false],
                            //     "red",
                            //     "blue"
                            // ],
                            // "fill-opacity": [
                            //     "case",
                            //     ["boolean", ["feature-state", "hover"], false],
                            //     1,
                            //     0.6
                            // ],
                        }
                    },
                    // Place polygons under labels, roads and buildings.
                    'building'
                );

                map.addLayer(
                    {
                        'id': 'counties-line',
                        'type': 'line',
                        'source': 'counties',
                        'source-layer': 'original',
                        'paint': {
                            'line-color': '#fff',
                            'line-width': 2  // 设置轮廓线宽度为2个像素
                        }
                    },
                    // Place polygons under labels, roads and buildings.
                    'building'
                );

                map.addLayer(
                    {
                        'id': 'counties-highlighted',
                        'type': 'fill',
                        'source': 'counties',
                        'source-layer': 'original',
                        'paint': {
                            'fill-outline-color': '#484896',
                            'fill-color': 'red',
                            'fill-opacity': 1
                        },
                        'filter': ['in', 'FIPS', '']
                    },
                    // Place polygons under labels, roads and buildings.
                    'building'
                );

                
                map.on('click', (e) => {
                    // Set `bbox` as 5px reactangle area around clicked point.
                    const bbox = [
                        [e.point.x - 5, e.point.y - 5],
                        [e.point.x + 5, e.point.y + 5]
                    ];
                    // Find features intersecting the bounding box.
                    const selectedFeatures = map.queryRenderedFeatures(bbox, {
                        layers: ['counties']
                    });
                    console.log(selectedFeatures, 'selectedFeatures=============');
                    const fips = selectedFeatures.map(
                        (feature) => feature.properties.FIPS
                    );
                    // Set a filter matching selected features by FIPS codes
                    // to activate the 'counties-highlighted' layer.
                    map.setFilter('counties-highlighted', ['in', 'FIPS', ...fips]);


                    // 通过使用feature的id属性，设置featureState来实现高亮
                    // // 获取点击位置的坐标
                    let previousSelectedId;
                    // const coords = e.lngLat;

                    // // 查询与点击位置相交的矢量要素
                    // const features = map.queryRenderedFeatures(e.point,{ layers: ['counties'] });

                    // // 清除之前选中要素的状态
                    // if (map.getFeatureState({ source: 'counties',sourceLayer: 'original',  id: previousSelectedId })) {
                    //     map.removeFeatureState({ source: 'counties',sourceLayer: 'original', id: previousSelectedId });
                    // }

                    // console.log(features[0]);

                    // // 高亮选中的要素
                    // if (features.length) {
                    //     map.getCanvas().style.cursor = 'pointer';
                    //     const selectedId = features[0].id;
                    //     // 可以根据需要自定义高亮效果
                    //     map.setFeatureState({ source: 'counties',sourceLayer: 'original', id: features[0].id }, { hover: true });
                    //     // 记录当前选中要素的 ID
                    //     previousSelectedId = selectedId;
                    // }
                });
            })



        },
    },
};
</script>
  
<style></style>
  